<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="">
<title>UCenter注册演示</title>
<link href="<?php echo base_url(); ?>res/libs/bootstrap/css/bootstrap.css?v=3.3.0" rel="stylesheet">
<link href="<?php echo base_url(); ?>res/front/css/main.css" rel="stylesheet">
<!--[if lt IE 9]>
	<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="reg" style="width:700px; margin:100px auto;">
<?php if (! empty($message)) { ?>
	<div class="bg-warning p15">
		<?php echo $message; ?>
	</div>
<?php } ?>
	<form id="J-register-form" action="<?php echo site_url('demo/auth/register'); ?>" method="post" role="form">
		<div class="form-group">
			<label for="J-reg-username">
				用户账号
			</label>
			<input class="form-control" id="J-reg-username" type="text" name="username" value="<?php echo set_value('username'); ?>" placeholder="输入用户账号">
			<div class="J-reg-tip help-block">3-15位，不能有空格,支持中文、字母、数字、下划线和小数点</div>
		</div>
		<div class="form-group">
			<label for="J-reg-password">
				用户密码
			</label>
			<input class="form-control" id="J-reg-password" type="password" name="password" value="" placeholder="输入用户密码">
			<div class="J-reg-tip help-block" id="J-reg-tip-password">密码最小长度6个字，最大长度15个字</div>
		</div>
		<div class="form-group">
			<label for="J-reg-repassword">
				确认密码
			</label>
			<input class="form-control" id="J-reg-repassword" type="password" name="repassword" value="" placeholder="输入确认密码">
			<div class="J-reg-tip help-block">请再输入一遍您上面填写的密码</div>
		</div>
		<div class="form-group">
			<label for="J-reg-email">
				用户邮箱
			</label>
			<input class="form-control" id="J-reg-email" type="email" name="email" value="<?php echo set_value('email'); ?>" placeholder="输入用户邮箱">
			<div class="J-reg-tip help-block">请填写真实的电子邮箱</div>
		</div>
		<button type="submit" class="btn btn-primary">确认注册</button>
	</form>
</div>

<script src="<?php echo base_url(); ?>res/libs/jquery/jquery-1.9.1.min.js"></script>
<script src="<?php echo base_url(); ?>res/libs/jquery-validate/jquery.validate.min.js?v=1.13.1"></script>
<script>
$(function(){
	var reg_tip_password = $("#J-reg-tip-password");; //密码提示区
	
	//validate插件修改了remote ajax验证返回的response处理方式
	$("#J-register-form").validate({
		//debug : true,
		//指定错误信息位置
		errorPlacement : function (error, element) {
			//console.log(error);
            element.parent("div").find(".J-reg-tip").html(error).prepend('<span class="glyphicon glyphicon-remove text-danger"></span>');
        },
		errorClass : 'text-danger', //验证没有通过时提示的css类名
		validClass : 'text-success', //验证通过时提示的css类名
        errorElement : 'span', //设置错误信息存放标签
		
		onkeyup : false,
		
		focusInvalid : false,
		highlight : false,
		unhighlight	: function(element, errorClass, validClass) {
			if(element.value){
				$(element).parent("div").find(".J-reg-tip").html('<span class="glyphicon glyphicon-ok text-success"><span>');
			}
		},
		//验证规则
		rules : {
			username : {
                required : true,
				remote : {
					url : '<?php echo site_url('demo/auth/check_username'); ?>',
					type : 'post',
					dataType : 'json',
					data : {
						username : function() {
							return $("#J-reg-username").val();
						}
					}
				}
            },
			password : {
                required : true,
				remote : {
					url : '<?php echo site_url('demo/auth/check_password'); ?>',
					type : 'post',
					dataType : 'json',
					data : {
						username : function() {
							return $("#J-reg-username").val();
						},
						password : function() {
							return $("#J-reg-password").val();
						}
					}
				}
            },
			repassword : {
                required : true,
				equalTo : '#J-reg-password'
            },
			email : {
                required : true,
				email : true,
				remote : {
					url : '<?php echo site_url('demo/auth/check_email'); ?>',
					type : 'post',
					dataType : 'json',
					data : {
						email : function() {
							return $("#J-reg-email").val();
						}
					}
				}
            }
		},
		//自定义的提示信息
		messages : {
			username : {
				required : '用户名不能为空',
				remote : '用户名已存在' //ajax验证默认提示
			},
			password : {
				required : '密码不能为空',
				remote : '密码不合要求' //ajax验证默认提示
			},
			repassword : {
				required : '确认密码不能为空',
				equalTo : '两次输入的密码不一致。请重新输入'
			},
			email : {
				required : '邮箱不能为空',
				email : '请输入正确的电子邮箱地址',
				remote : '该电子邮箱已被注册，请更换别邮箱' //ajax验证默认提示
			}
		},
		//获取焦点时事件
		onfocusin : function(element) {
			//聚焦时默认提示
			var focus_tips = {
				username : '3-15位，不能有空格,支持中文、字母、数字、下划线和小数点',
				password : '密码最小长度6个字，最大长度15个字',
				repassword : '请再输入一遍您上面填写的密码',
				email : '请填写真实的电子邮箱'
			};
			$(element).parent('div').addClass('active').find(".J-reg-tip").html(focus_tips[element.name]);
			
			//密码则添加强度验证
			if(element.name == 'password') {
				//密码强度
				var passwordRank = {
					1 : '<span class="pwd_strength_1"></span>弱',
					2 : '<span class="pwd_strength_2"></span>弱',
					3 : '<span class="pwd_strength_3"></span>中',
					4 : '<span class="pwd_strength_4"></span>强'
				};
				
				$(element).on('keyup', function(e) {
					//过滤tab键
					if(e.keyCode !== 9) {
						$.post('<?php echo site_url('demo/auth/check_password_strong'); ?>', {
							password : $("#J-reg-password").val()
						}, function(data){
							//已失焦，则显示强度
							if(reg_tip_password.data('blur')) {
								return false;
							}
							if(data.state === 'success') {
								reg_tip_password.html(passwordRank[data.message]);
							}else if(data.state === 'fail'){
								reg_tip_password.html('');
							}
						}, 'json');

						//移除失焦标识
						reg_tip_password.removeData('blur');
					}
				});
			}
			
		},
		//失去焦点时事件
		onfocusout	:  function(element) {
			$(element).parent('div').removeClass('active');
			//邮箱匹配点击后，延时处理
			if(element.name == 'email') {
				setTimeout(function() {
					element.value = $.trim(element.value);
				}, 150);
			} else {
				if(element.name === 'password'){
					//防止重复绑定
					$(element).off('keyup');
					//失焦标识
					reg_tip_password.data('blur', 'blur');
				}
			}
			
			if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {
				this.element( element );
			}
		}
	});
});
</script>
</body>
</html>
